<template>
  <sys-dialog
      :visible="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      @onClose="onClose"
      @onConfirm="onConfirmBtn"
  >
    <template #content>
      <a-form>
        <a-row>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.dateTime"
                :labelCol="{ style: 'width:80px;' }"
                label="日期"
            >
              <a-date-picker
                  @change="openChange"
                  format="YYYY-MM-DD"
                  v-model:value="dataTime"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.roomId"
                :labelCol="{ style: 'width:80px;' }"
                label="教室"
            >
              <a-select
                  v-model:value="addModel.roomId"
                  show-search
                  placeholder="选择教室"
                  style="width: 200px"
                  :options="roomOptions"
                  :filter-option="filterRoomOption"
              ></a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.courseId"
                :labelCol="{ style: 'width:80px;' }"
                label="课程"
            >
              <a-select
                  v-model:value="addModel.courseId"
                  show-search
                  placeholder="选择课程"
                  style="width: 200px"
                  :options="courseOptions"
                  :filter-option="filterCourseOption"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.teacherId"
                :labelCol="{ style: 'width:80px;' }"
                label="教师"
            >
              <a-select
                  v-model:value="addModel.teacherId"
                  show-search
                  placeholder="选择教师"
                  style="width: 200px"
                  :options="teacherOptions"
                  :filter-option="filterTeacherOption"
              ></a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.beginTime"
                label="上课时间"
                :labelCol="{ style: 'width:80px;' }"
            >
              <a-time-picker
                  @change="beginTimeChange"
                  :minuteStep="15"
                  v-model:value="beginTime1"
                  format="HH:mm"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="课程时长" :labelCol="{ style: 'width:80px;' }">
              <a-input-number
                  @change="inputChange"
                  id="inputNumber"
                  v-model:value="inputNumber"
                  :min="0"
                  :step="15"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="下课时间" :labelCol="{ style: 'width:80px;' }">
              <a-time-picker
                  :minuteStep="15"
                  v-model:value="endTime1"
                  format="HH:mm"
                  @change="endTimeChange"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </template>
  </sys-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import useSelect from '@/composable/schedule/useSelect';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useInstance from '@/hooks/useInstance';
import dayjs, { Dayjs } from 'dayjs';
import { EditType, Title } from '@/type/BaseEnum';
import { updateCalendarApi, addCalendarApi } from '@/api//schedule';
import {Form, message} from 'ant-design-vue'
//新增、编辑标志
const editType = ref('');
const useForm = Form.useForm;
//教师、课程数据属性
const { teacherOptions, roomOptions, courseOptions,
  filterCourseOption, filterRoomOption, filterTeacherOption } = useSelect()

//获取全局属性
const { global } = useInstance()
//弹框属性
const { dialog, onClose, onShow } = useDialog()
//日期
const dataTime = ref<Dayjs>();
//编辑显示弹框
const editCalender = (type: string, data?: any) => {
  editType.value = type;
  dataTime.value = undefined;
  endTime1.value = undefined;
  //清空表单
  resetFields();
  //设置弹框属性
  dialog.height = 250;
  dialog.width = 700;
  if (type == EditType.ADD) {
    dialog.title = Title.ADD;
    getEndTime()
  } else {
    dialog.title = Title.EDIT;
    //把要编辑的日历数据，设置到表单绑定的对象里面
    global.$objCopy(data, addModel)
    dataTime.value = dayjs(data.dateTime, 'YYYY-MM-DD')
    beginTime1.value = dayjs(data.beginTime, 'HH:mm')
    endTime1.value = dayjs(data.endTime, 'HH:mm')
  }
  //显示弹框
  onShow();
}
//上课时间
const beginTime1 = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endTime1 = ref<Dayjs>();


//表单绑定属性
const addModel = reactive({
  id: '',
  dateTime: '',
  roomId: '',
  teacherId: '',
  courseId: '',
  beginTime: '',
  endTime: '',
  duration: 0

})

//表单验证规则
const rules = reactive({
  dateTime: [{
    required: true,
    message: '请选择日期',
    trigger: 'change'
  }],
  roomId: [{
    required: true,
    message: '请选择教室',
    trigger: 'change'
  }],
  teacherId: [{
    required: true,
    message: '请选择教师',
    trigger: 'change'
  }],
  courseId: [{
    required: true,
    message: '请选择课程',
    trigger: 'change'
  }],
  beginTime: [{
    required: true,
    message: '请选择上课时间',
    trigger: 'change'
  }]
})
const { resetFields, validate, validateInfos } = useForm(addModel, rules);

//上课时间改变
const beginTimeChange = (time: string, timeString: string) => {
  getEndTime()
}

//下课时间点击事件
const endTimeChange = ()=>{
  if (endTime1.value.$H > beginTime1.value.$H){
    inputNumber.value = Math.abs(endTime1.value.$m - beginTime1.value.$m) + 60
  }else if (endTime1.value.$H == beginTime1.value.$H){//判读结束时间的小时是否等于开始时间的小时
    //判读结束时间的分钟是否大于开始时间的分钟
    if (endTime1.value.$m > beginTime1.value.$m){
      inputNumber.value = Math.abs(endTime1.value.$m - beginTime1.value.$m)
    }else {
      message.error("结束时间不能小于开始时间",1)
      getEndTime()
    }
  }else {
    message.error("结束时间不能小于开始时间",1)
    getEndTime()
  }

}

//课程时长
const inputNumber = ref<number>(45);
const inputChange = () => {
  getEndTime()
}

//获取课程结束时间
const getEndTime = () => {
  endTime1.value = dayjs(beginTime1.value, 'HH:mm').add(inputNumber.value, 'minute')
  addModel.beginTime = dayjs(beginTime1.value, 'HH:mm').format('HH:mm')
  addModel.endTime = dayjs(endTime1.value, 'HH:mm').format('HH:mm')
  addModel.duration = inputNumber.value
}
//开课时间日历回调
const openChange = (date: string, dateString: string) => {
  addModel.dateTime = dateString;
}
//注册事件
const emit = defineEmits(['upSuccess'])
//修改提交表单
const onConfirmBtn = () => {
  validate().then(async () => {
    let res = null;
    if (editType.value == EditType.ADD) {
      res = await addCalendarApi(addModel);
      if (res && res.code === 200){
        message.success(res.msg)
      }else {
        message.error(res.msg)
      }
    } else {
      res = await updateCalendarApi(addModel)
      if (res && res.code === 200){
        message.success(res.msg)
      }else {
        message.error(res.msg)
      }
    }
    if (res && res.code) {
      emit('upSuccess')
      onClose()
    }
  })
}
defineExpose({
  editCalender
})
</script>
<style scoped lang='scss'>
:deep(.ant-picker-input input) {
  width: 158px !important;
}
:deep(.ant-input-number) {
  width: 200px !important;
}
</style>
